<template>
	<view>
		<getTop :scrollTop='scrollTop' @toTop='toTop'></getTop>
		<view class="mi-circle-head  maxW" v-if="isShow">
			<view class="fill-height">
				<view class="header-btn">
					<view class="image-icons header-icon icon-back">
						<image src="../../static/images/left_back.png" mode="heightFix" @click="Back"></image>
					</view>
				</view>
				<view class="header-center">
					<view class="layout">
						<view class="info">
							<view class="device">
								<image :src="dataInfo.img_url" mode=""></image>
							</view>
							<view class="name">
								{{dataInfo.product_name}}
							</view>
							<view class="desc">
								{{dataInfo.heat}}热度
							</view>
						</view>
					</view>
				</view>
				<view class="follow-btn">
					+ 关注
				</view>
				<view class="header-btn share-btn">
					<view class="image-icons header-icon icon-share">
						<image src="../../static/images/three.png" mode="heightFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="mi-circle-header maxW">
			<view class="mi-circle-header-top">
				<view class="fill-height">
					<view class="header-btn">
						<view class="image-icons header-icon icon-back">
							<image src="../../static/images/left_back.png" mode="heightFix" @click="Back"></image>
						</view>
					</view>
					<view class="placeholder">
						米圈
					</view>
					<view class="header-btn share-btn">
						<view class="image-icons header-icon icon-share">
							<image src="../../static/images/three.png" mode="heightFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="title-goods-box">
				<view class="goods-img">
					<image :src="dataInfo.img_url" mode="heightFix"></image>
				</view>
				<view class="goods-info ">
					<view class="title" @click="toProDetail">
						{{dataInfo.product_name}}
					</view>
					<view class="desc">
						<view class="heat">
							<text>{{dataInfo.heat}}热度</text>
							<text class="text">{{dataInfo.join_num}}人参与讨论</text>
						</view>
					</view>
					<view class="follow-btn">
						+关注
					</view>
				</view>
			</view>
		</view>

		<template v-if="Object.keys(dataInfo).length==0">
			<view class="load">
				<u-loading-page :loading="true"></u-loading-page>
			</view>
		</template>
		<template v-else>
			<view class="show-content">
				<view class="content-header">
					<block v-for="(item,index) in navList" :key="index">
						<view class="item-nav " :class="{active:index==navIndex}" @click="changeNav(index)">
							<view class="title">
								{{item}}
							</view>
							<view class="line"></view>
						</view>
					</block>
				</view>
				<template v-if="navIndex==1">
					<template v-if="question_list.length===0">
						<noData></noData>
					</template>
					<template v-else>
						<view class="mi-circle-quesition">
							<view class="search">
								<view class="search-bar">
									<view class="search-bar-input">
										<image src="../../static/images/sear.png" mode=""></image>
										<input type="text" placeholder="试试搜索你的问题">
									</view>
								</view>
							</view>
							<view class="mi-circle-tags">
								<view class="ul">
									<block v-for="(item,index) in tag_list" :key="index">
										<view class="li  el-flex" :class="{active:tabIndex==index}"
											@click="tabIndex=index">
											<view class="text">
												{{item.tag_id}}
											</view>
											<text>{{item.num}}</text>
										</view>
									</block>

								</view>
							</view>
							<view class="touchBox list-container">
								<block v-for="(item,index) in question_list" :key="index">
									<view class="question-item" @click="toMicirleQuestionDetail(item)">
										<view class="qustion-container">
											<view class="question-list">
												<view class="q">
													<view class="p">
														{{item.question}}
													</view>
												</view>
												<view class="author ">
													<LazyLoad :src="item.icon" width='0.32rem' height='0.32rem'
														borderRadius='0.16rem'></LazyLoad>
													<view class="name text-ellipsis">
														{{item.nickname}}
													</view>
													<view class="time">
														{{item.create_time}} {{item.belong_place}}
													</view>
												</view>
												<view class="line"></view>
												<view class="answer-list">
													<block v-for="(i,j) in item.answer_list_v2" :key="j">
														<view class="a el-flex">
															<LazyLoad :src="i.icon" width='0.32rem' height='0.32rem'
																borderRadius='0.16rem'></LazyLoad>
															<view class="question text-ellipsis">
																{{i.answer}}
															</view>
														</view>
													</block>
												</view>
												<view class="answer-bottom" v-if="item.answer_num!=0">
													<view class="el-flex">
														<text> 全部 {{item.answer_num}} 条讨论</text>
														<image src="../../static/images/right.png" mode=""></image>
													</view>
												</view>
											</view>
										</view>
									</view>

								</block>
							</view>
						</view>
					</template>
				</template>
				<template v-if="navIndex==0">
					<miCommend :product_id='product_id' :commendAfter='commendAfter'></miCommend>
				</template>
				<template v-if="navIndex==2">
					<miEvaluate :topic_id='topic_id' :product_id='product_id'></miEvaluate>
				</template>
				<template v-if="navIndex==3">
					<miBuyshow :commodity_id='product_id' :page_index='page_index' @chanegPage_index='chanegPage_index'>
					</miBuyshow>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
	import noData from '../../components/noData/noData.vue'
	import miCommend from '../../components/mi_circle/mi_circle_commend/mi_circle_commend.vue'
	import miBuyshow from '../../components/mi_circle/mi_circle_buyshow/mi_circle_buyshow.vue'
	import miEvaluate from '../../components/mi_circle/mi_circle_evaluate/mi_circle_evaluate.vue'
	import LazyLoad from '../../components/LazyLoad/LazyLoad.vue'
	import getTop from '../../components/getTop/getTop.vue'
	export default {
		components: {
			miCommend,
			miBuyshow,
			LazyLoad,
			miEvaluate,
			noData,
			getTop
		},
		data() {
			return {
				isShow: false,
				question_list: [],
				tag_list: [],
				dataInfo: {},
				tabIndex: 0,
				after: '',
				navList: ['推荐', '问大家', '评测', '买家秀'],
				navIndex: 1,
				product_id: '',
				commendAfter: '',
				tag_id: '',
				loadAll: false,
				topic_id: '',
				page_index: 1,
				scrollTop: 0
			};
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
			if (res.scrollTop >= 150) {
				this.isShow = true
			} else {
				this.isShow = false
			}
		},
		watch: {
			tabIndex(newVal) {
				this.tag_id = this.tag_list[newVal].tag_id
				this.after = ''
				this.getQuestionList()
			}
		},
		onReachBottom() {
			if (this.navIndex == 1) {
				if (this.loadAll) return;
				if (this.after == '') this.after = 0;
				this.after++
				this.getQuestionList(true)
			} else if (this.navIndex == 0) {
				if (this.commendAfter == '') this.commendAfter = 0;
				this.commendAfter++
			} else if (this.navIndex == 3) {
				this.page_index++
			}
		},
		methods: {
			toTop() {
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0,
				})
			},
			Back() {
				uni.navigateBack(-1)
			},
			chanegPage_index() {
				this.page_index = 1
			},
			toMicirleQuestionDetail(item) {
				let id = item.q_id
				if (id) {
					uni.navigateTo({
						url: `/secPage/micircleQuestion/micircleQuestion?id=${id}`,
					})
				}

			},
			toProDetail() {
				uni.navigateTo({
					url: `/subPage/proddetail/proddetail?id=${this.product_id}`,
				})
			},
			changeNav(index) {
				if (this.navIndex == index) return;
				this.navIndex = index
				this.after = ''
				this.commendAfter = ''
				this.page_index = 1
			},
			getMizoneHome() {
				this.$request.get('/getMizoneHome', {
					product_id: this.product_id,
				}).then((res) => {
					this.dataInfo = res.data.data
					this.topic_id = res.data.data.topic_id
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
			getQuestionList(flag) {
				this.$request.get('/getQuestionList', {
					product_id: this.product_id,
					after: this.after,
					tag_id: this.tag_id
				}).then((res) => {
					this.tag_list = res.data.data.tag_list
					let list = res.data.data.question_list
					if (list.length == 0) {
						this.loadAll = true
					}
					if (flag) {
						this.question_list = this.question_list.concat(list)
					} else {
						this.question_list = list
					}
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad(e) {
			this.product_id = e.product_id
			this.getQuestionList()
			this.getMizoneHome()
		}
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
		font-size: .22rem;
	}

	/deep/uni-page-wrapper {
		overflow: hidden;
		height: auto;
	}

	.mi-circle-head {
		position: fixed;
		box-sizing: border-box;
		left: 0;
		right: 0;
		top: 0;
		z-index: 999;
		background: url(https://m.mi.com/static/img/bg.813761e1fe.jpeg) top no-repeat;
		background-size: 100% auto;
		padding: 0 0.32rem;

		.fill-height {
			height: 0.88rem;
			display: flex;
			-webkit-box-flex: 1;
			flex: 1 1 auto;
			align-items: center;
			flex-wrap: nowrap;

			.icon-back {
				display: inline-block;
				width: 0.72rem;
				height: 0.35rem;

				image {
					width: 0.72rem;
					height: 0.35rem;
				}
			}

			.share-btn {
				display: flex;
				align-items: center;
				height: 100%;

				.image-icons {
					display: flex;
					align-items: center;
					// width: 0.56rem;
					height: 0.08rem;
				}

				image {
					width: 0.56rem;
					height: 0.08rem;
				}
			}
		}



		.header-center {
			flex: 1;
			color: #fff;

			.layout {
				display: flex;
				align-items: center;

				.info {
					width: 95%;
					text-align: left;
					line-height: 1.2;
					font-size: .24rem;

					.device {
						margin-right: 0.1rem;
						float: left;
						width: 0.53rem;
						height: 0.53rem;
						border-radius: 0.08rem;
						overflow: hidden;

						image {
							display: block;
							width: 100%;
							height: 100%;
						}
					}

					.name {
						font-size: .24rem;
					}

					.desc {
						opacity: .7;
						text-align: left;
					}
				}
			}
		}

		.follow-btn {
			margin-right: 0.2rem;
			width: 1.13rem;
			height: 0.44rem;
			line-height: .44rem;
			text-align: center;
			font-size: .24rem;
			color: #0e1827;
			background-color: #fff;
			border-radius: 1em;
		}
	}

	.mi-circle-header {
		background-image: url(https://m.mi.com/static/img/bg.813761e1fe.jpeg);
		min-height: 4rem;
		background-size: cover;
		padding-bottom: 0.48rem;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;

		.mi-circle-header-top {
			color: #fff;
			padding: 0 0.32rem;

			.fill-height {
				height: 0.88rem;
				display: flex;
				-webkit-box-flex: 1;
				flex: 1 1 auto;
				align-items: center;
				flex-wrap: nowrap;

				.image-icons {}

				.icon-back {
					display: inline-block;
					width: 0.72rem;
					height: 0.35rem;

					image {
						width: 0.72rem;
						height: 0.35rem;
					}
				}

				.share-btn {
					display: flex;
					align-items: center;
					height: 100%;

					.image-icons {
						display: flex;
						align-items: center;
						// width: 0.56rem;
						height: 0.08rem;
					}

					image {
						width: 0.56rem;
						height: 0.08rem;
					}
				}

				.placeholder {
					flex: 1;
					text-align: center;
					font-size: .32rem;
					font-weight: 700;
					color: #fff;
					line-height: .32rem;
				}
			}
		}

		.title-goods-box {
			display: flex;
			padding: 0.4rem 0.32rem 0;
			-webkit-box-flex: 1;
			flex: 1 1 auto;
			flex-wrap: nowrap;

			.goods-img {
				width: 1.37rem;
				height: 1.37rem;
				background: #fff;
				border-radius: 0.08rem;
				margin-right: 0.32rem;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					height: 1.2rem;
				}
			}

			.goods-info {
				text-align: left;

				.title {
					font-size: .36rem;
					font-weight: 500;
					color: #fff;
					line-height: .36rem;
				}

				.desc {

					line-height: 1.4;
					margin-top: 0.39rem;
					opacity: .5;
					overflow: hidden;

					.heat {
						font-size: .24rem;
						font-weight: 500;
						color: #fff;

						.text {
							&:before {
								display: inline-block;
								content: "|";
								padding: 0 0.12rem;
								font-size: .14rem;
								color: rgba(225, 255, 255, .8);
							}
						}

						text {}
					}
				}

				.follow-btn {
					width: 1.34rem;
					height: 0.53rem;
					line-height: .53rem;
					font-size: .24rem;
					font-family: MILanPro--GB1-4, MILanPro--GB1;
					font-weight: 400;
					color: #0e1827;
					position: absolute;
					top: 1.8rem;
					right: 0.24rem;
					background-color: #fff;
					text-align: center;
					border-radius: 1em;
				}
			}
		}
	}

	.show-content {
		background: #fff;
		border-radius: 0.24rem 0.24rem 0 0;
		padding: 0 0.24rem 0.24rem;
		margin-top: 3.8rem;
		position: relative;

		.content-header {
			height: 0.43rem;
			margin: 0 -0.24rem;
			padding: 0.24rem 0.6rem 0.14rem;
			box-sizing: content-box;
			align-items: center;
			justify-content: space-around;
			display: flex;
			-webkit-box-flex: 1;
			flex: 1 1 auto;
			flex-wrap: nowrap;
			position: relative;

			&:after {
				content: "";
				position: absolute;
				height: 1px;
				background-color: #eee;
				transform: scaleZ(.5);
				bottom: 0;
				left: 0;
				right: 0;
			}

			.item-nav {
				position: relative;

				.title {
					font-size: .32rem;
					font-weight: 500;
					color: #333;
					line-height: .43rem;
				}

				.line {
					width: 0.14rem;
					height: 0.04rem;
					background: #ff5528;
					border-radius: 0.03rem;
					margin: 0.12rem auto 0;
					position: absolute;
					left: 50%;
					margin-left: -0.07rem;
					opacity: 0;
					z-index: 1;
				}
			}

			.active {
				.title {
					color: #ff5528;
				}

				.line {
					opacity: 1;
				}
			}
		}

		.mi-circle-quesition {
			.search {
				margin: 0 -0.24rem;
				padding: 0 0.26rem;
				background: #f9f9f9;
				display: flex;
				flex-direction: column;

				.search-bar {
					padding: 0.26rem 0 0;
					display: flex;
					align-items: center;
					font-size: .3rem;

					.search-bar-input {
						padding: 0.13rem 0.26rem 0.13rem 0.69rem;
						background: #f0f0f0;
						border-radius: 0.34rem;
						flex: 1;
						position: relative;
						font-size: .3rem;

						image {
							width: 0.34rem;
							height: 0.34rem;
							left: 0.26rem;
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
						}

						input {
							width: 100%;
							line-height: .4rem;
							outline: none;
							border: none;
							background: transparent;
						}
					}
				}
			}

			.mi-circle-tags {
				padding: 0.26rem 0.24rem 0.2rem;
				margin: 0 -0.24rem;
				background-color: #f9f9f9;

				.ul {
					overflow: hidden;
					max-height: 1.25rem;

					.li {
						list-style: none;
						height: 0.54rem;
						border-radius: 0.27rem;

						justify-content: center;
						float: left;
						margin-right: 0.16rem;
						margin-bottom: 0.16rem;
						padding: 0 0.24rem;
						background: #fff;

						text {
							font-size: .24rem;
							font-weight: 700;
							line-height: .24rem;
							display: inline-block;
							padding-left: 0.1rem;
						}

						.text {
							font-size: .24rem;
							font-weight: 700;
							line-height: .24rem;
						}
					}

					.active {
						background: #ff5934;
						color: #fff;
					}
				}
			}

			.touchBox {
				.question-item {
					position: relative;

					&:after {
						content: "";
						height: 0;
						border-bottom: 0.12rem solid #f6f6f6;
						position: absolute;
						bottom: 0;
						left: -0.24rem;
						right: -0.24rem;
					}

					.qustion-container {

						.question-list {
							overflow: hidden;
							margin: 0 -0.24rem;
							padding: 0.54rem 0.24rem 0.56rem;
							border-radius: 0.16rem;
							text-align: left;
							background: #fff;
							position: relative;

							.q {


								.p {
									line-height: 1.5;
									font-size: .28rem;
									font-weight: 700;
									color: #000;
								}
							}

							.author {
								margin-top: 0.16rem;
								align-items: center;
								padding-bottom: 0.24rem;
								display: flex;
								-webkit-box-flex: 1;
								flex: 1 1 auto;
								flex-wrap: nowrap;

								/deep/.muqian-content {
									margin-right: 0.16rem;
								}

								.icon {
									width: 0.32rem;
									height: 0.32rem;
									border-radius: 0.16rem;
									margin-right: 0.16rem;
								}

								.name {
									font-size: .24rem;
									color: rgba(0, 0, 0, .4);
									margin-right: 0.2rem;
									max-width: 2rem;
								}

								.time {
									font-size: .24rem;
									color: rgba(0, 0, 0, .4);
								}
							}

							.line {
								width: 100%;
								height: 1px;
								background: url(../../static/images/line.png) no-repeat 50%;
								background-size: contain;
								opacity: .5;
							}

							.layout {
								display: -webkit-box;
								display: flex;
								-webkit-box-flex: 1;
								flex: 1 1 auto;
								flex-wrap: nowrap;
							}

							.answer-list {
								padding-top: 0.2rem;

								.a {
									font-size: .24rem;
									font-weight: 400;
									color: rgba(0, 0, 0, .87);
									line-height: .28rem;
									position: relative;
									justify-content: flex-start;
									padding-top: 0.12rem;

									/deep/.muqian-content {
										margin-right: 0.16rem;
									}

									image {
										width: 0.32rem;
										height: 0.32rem;
										border-radius: 0.16rem;
										margin-right: 0.16rem;
									}

									.question {
										flex: 1;
										font-size: .24rem;
										font-weight: 400;
										color: rgba(0, 0, 0, .87);
									}
								}
							}

							.answer-bottom {
								margin-top: 0.24rem;

								view {
									justify-content: flex-start;
								}

								text {
									font-size: .24rem;
									color: rgba(0, 0, 0, .4);
								}

								image {
									width: 0.26rem;
									height: 0.26rem;
									vertical-align: -0.04rem;
								}
							}
						}
					}
				}
			}
		}
	}
</style>